<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>珠峰培训</title>
    <link rel="stylesheet" href="bootstrap.css">
    <style>
      .del{text-decoration: line-through;color:#cccccc!important;}
    </style>
</head>
<body>
<div id="app">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">
          ToDoList
        </a>
      </div>
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <div class="panel panel-warning">
          <div class="panel-heading ">
            <h3 class="text-danger">亲~ ^_^你有 {{count}} 件事要完成</h3>
            <input type="text" class="form-control" v-model="title" @keyup.13="add">
          </div>
          <div class="panel-body">
            <ul class="list-group">
              <li class="list-group-item" v-for="(todo,index) in filterTodos" @dblclick="remember(todo)">
                <!--如果isSelected为true则del生效-->
                <!--当我点击li时 我可以知道点击的是那一项，如果我点击的todo和当前循环的某一个相等的时候 应该显示输入框-->
                <span :class="{del:todo.isSelected}" v-show="cur!=todo">
                  <input type="checkbox" v-model="todo.isSelected">
                  {{todo.title}}
                </span>
                <input type="text" v-model="todo.title" v-show="cur==todo" @keyup.enter="cancel" @blur="cancel" v-focus="cur==todo">
                <button class="pull-right btn btn-danger btn-xs" @click="remove(todo)">&bigotimes;</button>
              </li>
            </ul>
          </div>
          <div class="panel-footer">
            <ul class="nav nav-pills">
              <li role="presentation" :class="{active:hash==='all'}"><a href="#/all" >全部任务</a></li>
              <li role="presentation" :class="{active:hash==='finish'}"><a href="#/finish" >已完成</a></li>
              <li role="presentation" :class="{active:hash==='unfinish'}"><a href="#/unfinish">未完成</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script src="vue.js"></script>
<script src="todo.js"></script>
</body>
</html>

